<template> 
  <div class="annotation-page">
     <div class="top">
      <div class="filters">
        <div class="filter-group" v-for="filter in filterOptions" :key="filter.key">
          <el-dropdown @command="(value) => handleFilterChange(filter.key, value)" class="filter-dropdown">
            <span class="filter-button">
              {{ getFilterLabel(filter) }}
              <el-icon class="dropdown-icon">
                <ArrowDown />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="option in filter.options" :key="option.value" :command="option.value"
                  :class="{ active: filters[filter.key] === option.value }">
                  {{ option.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div class="right-item" @click="handleAdd">Create Short Course</div>
    </div>
    
    <div class="content-grid">
       <shortCourseItem v-for="item in contentItems" :item="item" :key="item.id" @click="handleCardClick(item.id)"/>
    </div>
    <div class="page">
       <el-pagination
          :page-size="pages.pageSize"
          :pager-count="pages.count"
          :current-page="pages.page"
          layout="prev, pager, next"
          :total="pages.total"
          @current-change="projectList">
        </el-pagination>
    </div>
   
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref, reactive } from 'vue'
import { ArrowDown} from '@element-plus/icons-vue'
import shortCourseItem from '@/views/components/shortCourseItem.vue'
import logo1 from '@/assets/1.jpg';

// 获取路由实例
const router = useRouter()
// 筛选器数据
const filters = reactive({
  discipline: '',
  keyWorlds: '',
})

// 筛选器选项配置
const filterOptions = ref([
  {
    key: 'Language',
    placeholder: 'Language',
    options: [
      { label: 'All Language', value: '' },
      { label: 'chinese', value: 'cn' },
      { label: 'english', value: 'en' }
    ]
  },
  {
    key: 'duration',
    placeholder: 'Duration',
    options: [
      { label: '1week', value: '1' },
      { label: '2week', value: '2' },
      { label: '3week', value: '3' },
      { label: '4week', value: '4' }
    ]
  },
  {
    key: 'certifcate',
    placeholder: 'No Certifcate',
    options: [
      { label: 'No Certifcate', value: '0' },
      { label: 'Certifcate', value: '1' },
      { label: 'Certifcate2', value: '2' },
      { label: 'Certifcate3', value: '3' },
      { label: 'Certifcate4', value: '4' }
    ]
  },
])
// 分页器
const pages=reactive({
  pageSize:10,
  page:1,
  count:11,
  total:1000
})
// 选择页码
const projectList=()=>{
  console.log(pages.pageSize)
}
// 内容项目数据
const contentItems = ref([
  {
    id: 1,
    title:"K-Means Clustering ",
    image: logo1,
    duration: "2 weeks ago",
    credits: 8,
    duration: "2 weeks ago",
    views: "86.6k",
  },
  {
    id: 2,
     title:"K-Means Clustering ",
    image: logo1,
    duration:"2 weeks ago",
    credits: 8,
    timeAgo: "2 weeks ago",
    views: "86.6k",
  },
  {
    id: 3,
     title:"K-Means Clustering ",
    image: logo1,
    duration: "2 weeks ago",
    credits: 8,
    timeAgo: "2 weeks ago",
    views: "86.6k",
  },
  {
    id: 4,
     title:"K-Means Clustering ",
   image: logo1,
     duration: "2 weeks ago",
    credits: 8,
     timeAgo: "2 weeks ago",
    views: "86.6k",
  },
  {
    id: 5,
     title:"K-Means Clustering ",
    image: logo1,
    duration: "2 weeks ago",
    credits: 8,
     timeAgo: "2 weeks ago",
    views: "86.6k",
  },
  {
    id: 6,
     title:"K-Means Clustering ",
     image: logo1,
     duration: "2 weeks ago",
    credits: 8,
     timeAgo: "2 weeks ago",
    views: "86.6k",
  },
  {
    id: 7,
     title:"K-Means Clustering ",
     image: logo1,
    duration: "2 weeks ago",
    credits: 8,
     timeAgo: "2 weeks ago",
    views: "86.6k",
  },
  {
    id: 8,
     title:"K-Means Clustering ",
    image: logo1,
    duration: "2 weeks ago",
    credits: 8,
     timeAgo: "2 weeks ago",
    views: "86.6k",
  },
  {
    id: 9,
     title:"K-Means Clustering ",
     image: logo1,
    duration:"2 weeks ago",
    credits: 8,
     timeAgo: "2 weeks ago",
    views: "86.6k",
  },
  {
    id: 10,
     title:"K-Means Clustering ",
    image: logo1,
     duration:"2 weeks ago",
    credits: 8,
     timeAgo: "2 weeks ago",
    views: "86.6k",
  },
]);

// 处理筛选器变化
const handleFilterChange = (filterKey, value) => {
  filters[filterKey] = value
  console.log('筛选器变化:', filterKey, value)
}

// 获取筛选器显示标签
const getFilterLabel = (filter) => {
  const currentValue = filters[filter.key]
  if (!currentValue) {
    return filter.placeholder
  }
  const selectedOption = filter.options.find(option => option.value === currentValue)
  return selectedOption ? selectedOption.label : filter.placeholder
}

// 处理卡片点击
const handleCardClick = (id) => {
  console.log('点击卡片:', id)
  // 这里可以添加跳转到详情页的逻辑
}
// 新增
const handleAdd=()=>{
  router.push('/WeCurate/SystematicLearning/CreateShortCourse')
}
</script>

<style lang="scss" scoped>
.annotation-page {
  padding: 20px 20px 0 0;
  margin-right: 20px;
  margin-bottom: 20px;

  // 筛选器样式
  .filters {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    flex: 1;
    .filter-group {
      .filter-dropdown {
        height: 40px;
        .filter-button {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 8px 16px;
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 6px;
          color: #fff;
          font-size: 14px;
          cursor: pointer;
          transition: all 0.3s ease;
          min-width: 140px;
          justify-content: space-between;

          &:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.3);
          }

          .dropdown-icon {
            font-size: 12px;
            transition: transform 0.3s ease;
          }
        }
      }
    }
  }

  // 内容网格样式
  .content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;

   
  }
}
.top{
  display: flex;
  justify-content: space-between;
  align-content: center;

  .right-item{
    flex-shrink: 0;
    width: 204px;
    height: 40px;
    background: #E34234;
    border-radius: 10px;
    border: 1px solid #DB4235;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #FFFFFF;
    line-height: 32px;
    cursor: pointer;
  }

}
.page{
  display: flex;
  justify-content: center;
  height: 50px;
  margin-top: 20px;
  align-items: center;
}
// Element Plus 下拉菜单样式覆盖
:deep(.el-dropdown-menu) {
  background: rgba(30, 30, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);

  .el-dropdown-menu__item {
    color: #fff;

    &:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
    }

    &.active {
      background: rgba(227, 66, 52, 0.2);
      color: #E34234;
    }
  }
}
// 响应式设计
@media (max-width: 768px) {
  .annotation-page {
    padding: 16px;

    .filters {
      gap: 12px;

      .filter-group {
        .filter-dropdown {          
          .filter-button {
            min-width: 120px;
            padding: 6px 12px;
            font-size: 13px;
          }
        }
      }
    }

    .content-grid {
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
    }
  }
}

@media (max-width: 480px) {
  .annotation-page {
    .filters {
      flex-direction: column;

      .filter-group {
        .filter-dropdown {
          .filter-button {
            width: 100%;
          }
        }
      }
    }

    .content-grid {
      grid-template-columns: 1fr;
    }
  }
}
</style>
